<template>
	<view class="pb-60">
		<u-cell-item title="报名城市" :class="[iscity?'':'active']" :value="city" :arrow="iscity" @click="show=true,type=1"></u-cell-item>
		<u-cell-item title="居住地" :class="[isaddress?'':'active']" :value="address" :arrow="isaddress" @click="show=true,type=2"></u-cell-item>
		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<u-cell-item title="准驾车型" :arrow="false">
			<view slot="right-icon" class="input">
				<input type="text" v-model="license" placeholder="C1及以上驾驶证"/>
			</view>
		</u-cell-item>
		<view class="mlr-36">
			<view class="mt-40 size-32">
				上传证件
			</view>
			<view class="img text-center mt-30">
				<image :src="img1" mode="" @click="chooseImg1"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">驾驶证正页</text>
			</view>
			<view class="img text-center mt-60">
				<image :src="img2" mode="" @click="chooseImg2"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">驾驶证副页</text>
			</view>
		</view>
		<view class="center mt-40">
			<view class="radio center">
				<view class="radio-circle">
					
				</view>
			</view>
			<view class="size-26 ml-10">
				阅读并同意代驾司机加盟须知
			</view>
		</view>
		<u-button type="primary" :disabled="!sign_areas || !areas || !license || !imgurl1 ||!imgurl2" class="mt-60" @click="submit">提交审核</u-button>
		<!-- 选择地区 -->
		<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {upload} from '../../common/common.js'
	export default {
		data() {
			return {
				iscity:true,//是否选择报名城市
				city:'请选择',//报名城市
				sign_areas:'',//市区号
				isaddress:true,//是否选择居住地
				address:'请选择',//居住地
				areas:'',//区(县)的区号
				license:'',//驾照
				img1:'../../static/Driver-1.png',
				imgurl1:'',
				img2:'../../static/Driver-2.png',
				imgurl2:'',
				show:false,
				submitbtn:true
			}
		},
		methods: {
			// 选择城市
			confirm(e){
				console.log(e);
				if(this.type==1){
					this.iscity = false
					this.sign_areas = e.city.value + '00'
					if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
						this.city = e.province.label
					}else{
						this.city = e.province.label + '-' + e.city.label
					}
				}else{
					this.isaddress = false
					this.areas = e.area.value
					if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
						this.address = e.province.label + '-' + e.area.label
					}else{
						this.address = e.province.label + '-' + e.city.label + '-' + e.area.label
					}
				}
			},
			chooseImg1(){
				upload().then(data=>{
					this.img1 = data[0].img1
					this.imgurl1 = data[0].img2
				})
			},
			chooseImg2(){
				upload().then(data=>{
					this.img2 = data[0].img1
					this.imgurl2 = data[0].img2
				})
			},
			submit(){
				if(this.submitbtn == true){
					this.submitbtn = false
					this.$http('/addons/ddrive/user/verified',{
						type:2,
						truename: '',
						idcard: '',
						front_card_image: '',
						back_card_image: '',
						sign_areas: this.sign_areas,
						areas: this.areas,
						driver_license: this.license,
						driver_front_image: this.imgurl1,
						driver_back_image: this.imgurl2,
						card_brand:'',
						card_type:'',
						number_plate:'',
						card_front_image:'',
						card_back_image:''
					},"POST").then(data=>{
						this.$store.dispatch('updateUserInfo')
						uni.showToast({
							title: '提交成功,请耐心等待',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},1000)
					}).catch(data=>{
						this.submitbtn = true
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn{
		height: 96rpx !important;
	}
	
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}
	
	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}
	.active{
		/deep/.u-cell__value {
			color: $gray !important;
		}
	}
	.input{
		input{
			text-align: right;
			font-size: 28rpx;
			color: $gray;
		}
	}
	.img{
		image{
			width: 398rpx;
			height: 254rpx;
		}
	}
	.radio{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;
		.radio-circle{
			width: 22rpx;
			height: 22rpx;
			background: $blue;
			border-radius: 50%;
		}
	}
</style>
